import React from 'react';
import './index.css'
import { Tab } from 'semantic-ui-react'
// import axios from 'axios'
import LoadMore from './LoadMore.js'
// import { Route ,Link,Switch,Redirect} from "react-router-dom";

// 资讯数据
class Msg extends React.Component{
    render(){
        return <LoadMore type={1}></LoadMore>
    }
}
// class Msg extends React.Component{
//     constructor(props){
//         super(props);
//         this.state = {
//             list:[],
//             total:0
//         }
//     }
//     render(){
//         let listInfo = this.state.list.map(item=>{
//             return(
//                 <Item key={item.id}>
//                     <Item.Image size="small" src="http://47.96.21.88:8086/public/1.png"/>
//                     <Item.Content verticalAlign="middele">
//                         <Item.Header className="info-title">{item.info_title}</Item.Header>
//                         <Item.Meta>
//                             <span className="price">$1200</span>
//                             <span className="saty">1 month</span>
//                         </Item.Meta>
//                     </Item.Content>
//                 </Item>
//             );
//         })
//         return(
//             <Item.Group unstackable>
//                 {listInfo}
//             </Item.Group>
//         )
//     }
//     componentDidMount(){
//         axios.post('infos/list',{
//             type:1,
//             pagenum:0,
//             pagesize:2
//         }).then(res=>{
//            this.setState({
//             list:res.data.list.data,
//             total:res.data.list.total
//            })
//         })
//     }
// }

// 头条数据
class Top extends React.Component{
    render(){
        return <LoadMore type={2}></LoadMore>
    }
}
// class Top extends React.Component{
//     constructor(props){
//         super(props);
//         this.state = {
//             list:[],
//             total:0
//         }
//     }
//     render(){
//         let listInfo = this.state.list.map(item=>{
//             return(
//                 <Item key={item.id}>
//                     <Item.Image size="small" src="http://47.96.21.88:8086/public/1.png"/>
//                     <Item.Content verticalAlign="middele">
//                         <Item.Header className="info-title">{item.info_title}</Item.Header>
//                         <Item.Meta>
//                             <span className="price">$1200</span>
//                             <span className="saty">1 month</span>
//                         </Item.Meta>
//                     </Item.Content>
//                 </Item>
//             );
//         })
//         return(
//             <Item.Group unstackable>
//                 {listInfo}
//             </Item.Group>
//         )
//     }
//     componentDidMount(){
//         axios.post('infos/list',{
//             type:1,
//             pagenum:0,
//             pagesize:4
//         }).then(res=>{
//            this.setState({
//             list:res.data.list.data,
//             total:res.data.list.total
//            })
//         })
//     }
// }

// 问答数据
class Faq extends React.Component{
    render(){
        return <LoadMore type={3}></LoadMore>
    }
}
// class Faq extends React.Component{
//     constructor(props){
//         super(props);
//         this.state={
//             list:[],
//             total:0
//         }
//     }
//     render(){
//         let faqInfo = this.state.list.map(item=>{
//             return(
//                 <li key={item.id}>
//                     <div className="title">
//                         <span className="cate">
//                             <Icon color="green" name="user" size="small"></Icon>
//                             思维
//                         </span>
//                         <span>{item.quwstion_name}</span>
//                     </div>
//                     {item.answer_content&&(
//                         <div className="user">
//                             <Icon circular name="users" size="mini"/>
//                             {item.username}的回答
//                         </div>
//                     )}
//                     <div className="info">
//                         {item.answer_content}
//                     </div>
//                     <div className="tag">
//                         {item.question_tag&&item.question_tag.split(',').map((tag,index)=>{return <span key={index}>{tag}X</span>})}
//                         <span>{item.qnum?item.qnum:0}个回答</span>
//                     </div>
//                 </li>
//             )
//         })
//         return(
//             <div>
//                 <div className="info-ask-btn">
//                     <Button fluid color="green">快速提问</Button>
//                 </div>
//                 <div className="info-ask-list">
//                     {faqInfo}
//                 </div>
//             </div>
//         );
//     }
//     componentDidMount(){
//         axios.post('infos/list',{
//             type:3,
//             pagenum:0,
//             pagesize:2
//         }).then(res=>{
//            this.setState({
//                list:res.data.list.data,
//                total:res.data.list.total
//            })
//         })
//     }
// }

class Home extends React.Component{
    render(){
        const panes = [
            { menuItem: '资讯', render: () => <Tab.Pane><Msg></Msg></Tab.Pane>},
            { menuItem: '头条', render: () => <Tab.Pane><Top></Top></Tab.Pane>},
            { menuItem: '问答', render: () => <Tab.Pane><Faq></Faq></Tab.Pane>}
        ]
        return(
            <div className="find-cintainer">
                <div className="find-topbar">资讯</div>
                <div className="find-content">
                    <div>
                        <Tab panes={panes}></Tab>
                    </div>
                </div>
            </div>
        );
    }
}

export default Home

// // export default Home;
// import 'babel-polyfill';
// import React from 'react';
// // import './style.less';

// import Tloader from 'react-touch-loader';

// class App extends React.Component {
//   constructor() {
//     super();
//     this.state = {
//       canRefreshResolve: 1,
//       listLen: 0,
//       hasMore: 0,
//       initializing: 1,
//       refreshedAt: Date.now(),
//     };
//   }
  
//   // 初始化数据
//   componentDidMount() {
//     setTimeout(() => {
//       this.setState({
//         listLen: 9,
//         hasMore: 1,
//         initializing: 2, // initialized
//       });
//     }, 2000);
//   }

//   refresh = (resolve, reject) => {
//     setTimeout(() => {
//       const { canRefreshResolve } = this.state;
//       if (!canRefreshResolve) reject();
//       else {
//         this.setState({
//           listLen: 9,
//           hasMore: 1,
//           refreshedAt: Date.now(),
//         });

//         resolve();
//       }
//     }, 2e3);
//   }

//   loadMore = (resolve) => {
//     setTimeout(() => {
//       const { listLen } = this.state;
//       const l = listLen + 9;

//       this.setState({
//         listLen: l,
//         hasMore: l > 0 && l < 50,
//       });

//       resolve();
//     }, 2e3);
//   }


//   toggleCanRefresh = () => {
//     const { canRefreshResolve } = this.state;

//     this.setState({ canRefreshResolve: !canRefreshResolve });
//   }

//   render() {
//     const {
//       listLen, hasMore, initializing, refreshedAt, canRefreshResolve,
//     } = this.state;
//     const list = [];

//     if (listLen) {
//       for (let i = 0; i < listLen; i++) {
//         list.push((
//           <li key={i}>
//             <p>{i}</p>
//           </li>
//         ));
//       }
//     }
//     return (
//       <div className="view">
//         <h1>react-touch-loader {refreshedAt.toString().substr(7)}</h1>

//         <Tloader
//           className="main"
//           onRefresh={this.refresh}
//           onLoadMore={this.loadMore}
//           hasMore={hasMore}
//           initializing={initializing}
//         >
//           <ul>{list}</ul>
//         </Tloader>

//         <div className="footer">
//           <a href="https://github.com/Broltes/react-touch-loader">view source</a>
//           <label>
//             can refresh resolve
//             <input
//               type="checkbox"
//               checked={canRefreshResolve}
//               onChange={this.toggleCanRefresh}
//             />
//           </label>
//         </div>
//       </div>
//     );
//   }
// }

// export default App